<template>
  <div>
    <Carousel loop>
      <CarouselItem>
        <div class="demo-carousel">
          <img src="https://static.darryring.com/vidoe/drElove/U230802560_57da2cf1b4d24380a91b50aee4377ba9" />
        </div>
      </CarouselItem>
      <CarouselItem>
        <div class="demo-carousel">
          <img src="https://static.darryring.com/vidoe/drElove/U230802377_4a1bd95c42cf440b98e3cfa5530f4993" />
        </div>
      </CarouselItem>
      <CarouselItem>
        <div class="demo-carousel">
          <img src="https://static.darryring.com/vidoe/drElove/U230400610_97356cadd57941a5a6b2b33951be3922" />
        </div>
      </CarouselItem>
    </Carousel>
    <div class="major-goods-container">
      <div class="box">
        <div class="left">
          <a class="image-wrap" href="">
            <img src="https://demo.beikeshop.com/catalog/demo/image_plus_1-en.png" class="img-fluid">
          </a>
        </div>
        <div class="right">
          <div class="right-top">
            <a class="image-wrap" href="">
              <img src="https://demo.beikeshop.com/catalog/QQ图片20230720180139.png" class="img-fluid">
            </a>
            <a class="image-wrap" href="">
              <img src="https://demo.beikeshop.com/catalog/demo/image_plus_3-en.png" class="img-fluid">
            </a>
          </div>
          <div class="right-bottom">
            <a class="image-wrap" href="">
              <img src="https://demo.beikeshop.com/catalog/demo/image_plus_4-en.png" class="img-fluid">
            </a>
          </div>
        </div>
      </div>
      <div class="one-div">
        <img src="https://demo.beikeshop.com/catalog/demo/banner/banner-2-en.png" class="img-fluid">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MajorGoods"
}
</script>

<style lang="scss" scoped>
.demo-carousel {
  height: 750px;
  //height: auto;
  position: relative;
  font-size: 0;
}
.major-goods-container {
  //display: flex;
  //justify-content: center;
  width: 1600px;
  max-width: 1600px;
  margin-bottom: 10px;
  margin: auto;

  //background-color: black;

  .box {
    display: flex;

    .left {
      width: 800px;
      padding: 10px 10px 10px 10px;
    }

    .right {
      width: 800px;

      .right-top {
        margin-top: 10px;
        display: flex;
        justify-content: space-around;

        img {
          width: 390px;
        }
      }

      .right-bottom {
        //padding: 5px;
        margin-top: 5px;
        margin-left: 15px;
      }
    }
  }

  img:hover {
    transition: .3s ease-in-out;
  }

  .image-wrap {
    display: block;
    overflow: hidden;
  }

  .img-fluid, .img-thumbnail {
    height: auto;
    max-width: 100%;
  }

  .one-div {
    margin: 10px;
  }
}
</style>
